<template>
  <div class="category-list">
    <ul class="u-list">
      <li class="u-item">
        <div class="li-item">
          <div class="item-l">
            <img class="item-cover" src="../assets/image/imgtest1.png" alt>
          </div>
          <div class="item-r li-summary">
            <div class="li-title">禾葡兰法国研究中心在普罗旺斯落成禾葡兰落成</div>
            <div class="sum-info">
              <div class="sum-department">编辑部</div>
              <div class="sum-time">2018.12.12</div>
            </div>
            <div class="li-operate">
              <span class="praise">
                <img src="../assets/image/good.png" alt="赞">
                <span>赞</span>
              </span>
              <span class="comment">
                <img src="../assets/image/comment.png" alt="评论">
                <span>评论</span>
              </span>
              <span class="share">
                <img src="../assets/image/share.png" alt="分享">
                <span>转发</span>
              </span>
            </div>
          </div>
        </div>
      </li>
      <li class="u-item">
        <div class="li-item">
          <div class="item-l">
            <img class="item-cover" src="../assets/image/imgtest1.png" alt>
          </div>
          <div class="item-r li-summary">
            <div class="li-title">禾葡兰法国研究中心在普罗旺斯落成禾葡兰落成</div>
            <div class="sum-info">
              <div class="sum-department">编辑部</div>
              <div class="sum-time">2018.12.12</div>
            </div>
            <div class="li-operate">
              <span class="praise">
                <img src="../assets/image/good.png" alt="赞">
                <span>赞</span>
              </span>
              <span class="comment">
                <img src="../assets/image/comment.png" alt="评论">
                <span>评论</span>
              </span>
              <span class="share">
                <img src="../assets/image/share.png" alt="分享">
                <span>转发</span>
              </span>
            </div>
          </div>
        </div>
      </li>
      <li class="u-item">
        <div class="li-item">
          <div class="item-l">
            <img class="item-cover" src="../assets/image/imgtest1.png" alt>
          </div>
          <div class="item-r li-summary">
            <div class="li-title">禾葡兰法国研究中心在普罗旺斯落成禾葡兰落成</div>
            <div class="sum-info">
              <div class="sum-department">编辑部</div>
              <div class="sum-time">2018.12.12</div>
            </div>
            <div class="li-operate">
              <span class="praise">
                <img src="../assets/image/good.png" alt="赞">
                <span>赞</span>
              </span>
              <span class="comment">
                <img src="../assets/image/comment.png" alt="评论">
                <span>评论</span>
              </span>
              <span class="share">
                <img src="../assets/image/share.png" alt="分享">
                <span>转发</span>
              </span>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { Grid, GridItem, GroupTitle } from 'vux'
export default {
  name: 'CategoryList',
  components: {
    Grid,
    GridItem,
    GroupTitle
  }
}
</script>
<style lang="less">
  .category-list {
    position: relative;
    height: 100%;
    overflow: hidden;
    .u-list {
      list-style: none;
      position: absolute;
      height: 100%;
      width: 100%;
      overflow-y: scroll;
      .u-item {
        position: relative;
        &::after {
          content: '';
          position: absolute;
          left: -50%;
          right: -50%;
          border-bottom: 1px solid #ccc;
          transform: scale(0.5);
        }
      }
      .li-item {
        display: flex;
        padding: 10px;
        padding-top: 20px;
      }
      .item-l {
        flex: 1;
        margin-right: 20px;
        .item-cover {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 5px;
          background-color: #777;
        }
      }
      .item-r {
        flex: 2;
      }
      .li-summary {
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        .li-title {
          font-size: 14px;
          padding-bottom: 5px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .sum-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 12px;
          padding-bottom: 3px;
          color: #777;
        }
        .li-operate {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 11px;
          color: #777;
          & > span {
            display: inline-flex;
            align-items: center;
          }
          img {
            width: 16px;
            height: 16px;
            padding-right: 5px;
          }
        }
      }
    }
  }
</style>
